<template>
    <view class="content">
        <view class="nav" v-if="userType == 1 || userType == 2">
            <view class="nav-item" :class="{active : type == 2}" @click="chooseNav(2)">门店打卡</view>
            <view class="nav-item" :class="{active : type == 1}" @click="chooseNav(1)">楼盘打卡</view>
        </view>
        <view class="top">
            <view class="u-flex u-flex-1">
                <image :src="data.headimgurl || '/static/icon/avatar.png'" class="avatar"></image>
                <view class="u-flex-1">
                    <view class="name">{{data.user_name}}</view>
                    <view class="job">{{data.position}}</view>
                </view>
            </view>
            <view class="top-r" @click="$gTo('/mine/pages/hit-card/hit-card-rule')">
                <image src="../../static/icon/card_01.png" class="card-01"></image>
                <view>规则</view>
            </view>
        </view>
        <view class="box">
            <image src="../../static/icon/card_02.png" class="card-02"></image>
            <view class="u-flex u-row-between u-col-center">
                <view>
                    <view class="hit">立即打卡</view>
                    <view class="time">{{hour}}:{{minute}}:{{second}}</view>
                </view>
                <image src="../../static/icon/card_03.png" class="card-03" @click="$noMultipleClicks(doHit)"></image>
            </view>
            <view class="add">
                <image src="../../static/icon/card_04.png" class="card-04"></image>
                <view class="u-flex-1">{{data.address}}</view>
            </view>
        </view>
        <view class="down">
            <view @click="$gTo('/mine/pages/hit-card/hit-card-list')">
                <image src="../../static/icon/card_05.png" class="card-05"></image>
                <view>打卡信息</view>
            </view>
            <view @click="show = true">
                <image src="../../static/icon/card_06.png" class="card-05"></image>
                <view>申请休息</view>
            </view>
            <view @click="$gTo('/mine/pages/hit-card/rest')">
                <image src="../../static/icon/card_07.png" class="card-05"></image>
                <view>请假、休息记录</view>
            </view>
        </view>
        <view class="tip">
            <image src="/static/icon/tip.png" class="sh"></image>
            <view>温馨提示：月休4天，休息需提前一天进行申请</view>
        </view>
        
        <!-- 申请休息弹窗 -->
        <u-mask :show="show" mode="center" border-radius="14">
            <view class="popup">
                <view class="win-box2">
                    <view class="pop-cen">
                        <view class="pop-tit">申请休息</view>
                        <view class="pop-time">
                            <view class="u-p-r-20">日期选择</view>
                            <view class="pop-time-r" @click="timeShow = true">
                                <input type="text" v-model="startTime" placeholder="选择日期" disabled>
                                <image src="../../static/icon/time.png" class="time-icon"></image>
                            </view>
                        </view>
                        <view>备注</view>
                        <textarea v-model="content"></textarea>
                    </view>
                    <view class="pop-btn">
                        <view @click="show = false">取消</view>
                        <view @click="doApply">确认</view>
                    </view>
                </view>
            </view>
        </u-mask>
        
        <u-picker v-model="timeShow" mode="time" :params="timeParams" @confirm="chooseTime"></u-picker>
    </view>
</template>

<script>
    export default {
        data() {
            return {
				noClick:true,//连点
                show: false,
                timeShow: false,
                startTime: '',
                timeParams: { //时间格式
                	year: true,
                	month: true,
                	day: true,
                	hour: false,
                	minute: false,
                	second: false
                },
                content: '',
                longitude: '',
                latitude: '',
                data: {},
                timer: null,
                hour: '',
                minute: '',
                second: '',
                type: 1,//1楼盘 2门店  运维经理、总监 打卡时自行选择，其他身份默认楼盘打卡
                userType: '',//身份 1运维经理 2运维总监 3项目驻场 4项目总监 5经纪人 6店长 7管理员 8报备专员 9策划
            };
        },
        onLoad() {
            this.$getLocation((latitude,longitude) => {
                console.log('000',latitude, longitude)
                this.latitude = latitude
                this.longitude = longitude
                this.getData()
            })
            this.getInfo()
            this.getTime();
            // this.getAppLocation()
        },
        onHide() {
            clearTimeout(this.timer);
            this.timer = null
        },
        onUnload() {
            clearTimeout(this.timer);
            this.timer = null
        },
        methods: {
            chooseNav(num) {
                if (this.type == num) return
                this.type = num
                this.getData()
            },
            
            // 申请休息
            doApply() {
                if (!this.startTime) {
                    this.$toast('请选择休息日期');
                    return
                }
                if (!this.content) {
                    this.$toast('请填写备注');
                    return
                }
                this.$ajax('apply_rest', {
                    user_token: this.$getSync('userToken'),
                    date: this.startTime,//日期
                    remark: this.content,//备注
                }).then(ret => {
					console.log('1111',ret)
                    if (ret.success == 1000) {
                        this.$toast('提交成功');
                        this.show = false
                    } else {
                        this.$toast(ret.data.msg);
						// uni.showToast({
						//     title: ret.data.msg
						// });
						
                    }
					
                });
            },
            
            getAppLocation() {
                const _this = this;
                this.$amapPlugin.getRegeo({
                    type: 'gcj02', //map 组件使用的经纬度是国测局坐标， type 为 gcj02
                    success: function(res) {
                        console.log('app端地图')
                        console.log(res);
                        _this.latitude = res[0].latitude
                        _this.longitude = res[0].longitude
                        _this.getData()
                    },
                    fail: (res) => {
                        console.log(res);
                    }
                });
            },
            
            getTime() {
                var date = new Date()
                this.hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(), //时
                this.minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(), //分
                this.second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); //秒
                this.timer = setTimeout(() => {
                    this.getTime();
                }, 1000);
            },
            
            //选择时间
            chooseTime(e) {
            	this.startTime = e.year + '-' + e.month + '-' + e.day;
            },
            
            // 打卡
            doHit() {
				let _this = this
                this.$ajax('user_clockin', {
                    user_token: this.$getSync('userToken'),
                    longitude: this.longitude,//经度
                    latitude: this.latitude,//纬度
                    type: this.type,//1楼盘 2门店
                }).then(ret => {
                    if (ret.success == 1000) {
                        _this.$toast('打卡成功');
                    } else {
                        _this.$toast(ret.msg);
                    }
                });
            },
            
            getData() {
                this.$ajax('attendance_clockin', {
                    user_token: this.$getSync('userToken'),
                    longitude: this.longitude,//经度
                    latitude: this.latitude,//纬度
                    type: this.type,//1楼盘 2门店
                }).then(ret => {
                    if (ret.success == 1000) {
                        this.data = ret.detail
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            },
            
            getInfo() {
                this.$ajax('person_detail', {
                    user_token: this.$getSync('userToken'),
                }).then(ret => {
                    if (ret.success == 1000) {
                        this.userType = ret.detail.user_type
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            },
        }
    };
</script>

<style lang="scss">
    .nav{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 35rpx;
        border: 2rpx solid #00a1e9;
        border-radius: 20rpx;
        overflow: hidden;
    }
    .nav-item{
        width: calc(100vw / 2);
        padding: 20rpx 0;
        font-size: 30rpx;
        color: #00a1e9;
        text-align: center;
    }
    .active{
        color: #fff;
        background-color: #00a1e9;
    }
    
    page{
        background-color: #f3f5fa;
    }
    .content{
        padding: 35rpx 30rpx;
    }
    .top{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 35rpx;
    }
    .avatar{
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        border: 2rpx solid #fff;
        margin-right: 25rpx;
    }
    .name{
        font-size: 34rpx;
        font-weight: bold;
    }
    .job{
        font-size: 26rpx;
        color: #93939f;
        padding-top: 10rpx;
    }
    .top-r{
        font-size: 24rpx;
        color: #000048;
        padding: 15rpx 25rpx;
        background-color: #fff;
        border-radius: 50rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .card-01{
        width: 22rpx;
        height: 23rpx;
        margin-right: 10rpx;
    }
    
    .box{
        background-color: #fff;
        padding: 35rpx 30rpx;
        border-radius: 20rpx;
        margin-bottom: 20rpx;
    }
    .card-02{
        width: 53rpx;
        height: 53rpx;
    }
    .hit{
        color: #000048;
        font-size: 32rpx;
        font-weight: bold;
        padding-bottom: 5rpx;
    }
    .time{
        color: #000048;
        font-size: 60rpx;
        font-weight: bold;
    }
    .card-03{
        width: 149rpx;
        height: 148rpx;
    }
    .add{
        font-size: 24rpx;
        color: #8e939c;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 20rpx;
    }
    .card-04{
        width: 20rpx;
        height: 24rpx;
        margin-right: 10rpx;
    }
    
    .down{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;
    }
    .down>view{
        background-color: #fff;
        border-radius: 20rpx;
        width: calc(660rpx / 3);
        padding: 30rpx 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 26rpx;
    }
    .card-05{
        width: 50rpx;
        height: 50rpx;
        margin-bottom: 10rpx;
    }
    .tip{
        color: #45474c;
        font-size: 24rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-top: 5rpx;
    }
    .sh{
        width: 25rpx;
        height: 25rpx;
        margin-right: 10rpx;
    }
    
    
    .popup {
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .win-box2 {
        width: 80vw;
        background-color: #fff;
        border-radius: 20upx;
    }
    .pop-cen{
        padding: 50rpx 20rpx;
    }
    .pop-tit{
        font-size: 36rpx;
        font-weight: bold;
        text-align: center;
        padding-bottom: 25rpx;
    }
    .pop-time{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15rpx;
    }
    .pop-time-r{
        width: 55vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10rpx;
        border-radius: 10rpx;
        background-color: #f5f5f5;
    }
    .time-icon{
        width: 32rpx;
        height: 34rpx;
    }
    textarea{
        width: 100%;
        padding: 15rpx;
        border-radius: 10rpx;
        background-color: #f5f5f5;
        margin-top: 15rpx;
    }
    .pop-btn{
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 2rpx solid #e6e6e6;
    }
    .pop-btn>view{
        width: calc(80vw / 2);
        text-align: center;
        padding: 35rpx 0;
        font-size: 30rpx;
        color: #00a1e9;
    }
    .pop-btn>view:first-child{
        border-right: 2rpx solid #e6e6e6;
    }
    
</style>
